<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>五星级创意菜大师</title>
<link rel="stylesheet" href="{{ url_for('static', filename='header.css') }}">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script>
    var _hmt = _hmt || [];
    (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?38fcc093c940c38c72f6ed7e10f47097";
        var s = document.getElementsByTagName("script")[0]; 
        s.parentNode.insertBefore(hm, s);
    })();
</script>
<style>
body {
    font-family: Arial, sans-serif;
    color: #333;
    background-color: #f5f5f5;
    margin: 0;
    padding: 0;
}

.container {
    max-width: 800px;
    margin: 50px auto;
    background: white;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
h1 {
    text-align: center;
    margin-bottom: 20px;
}
h2 {
    color: #4a4a4a;
    text-align: center;
    margin-bottom: 20px;
}

label {
    display: block;
    margin-bottom: 10px;
}

input[type="checkbox"],
input[type="radio"] {
    margin-right: 10px;
    vertical-align: middle;
}
.ingredient-list {
    column-count: 7;
    -webkit-column-count: 7;
    -moz-column-count: 7;
    column-gap: 20px;
    -webkit-column-gap: 20px;
    -moz-column-gap: 20px;
}
.cuisine-list {
    column-count: 7;
    -webkit-column-count: 7;
    -moz-column-count: 7;
    column-gap: 20px;
    -webkit-column-gap: 20px;
    -moz-column-gap: 20px;
    margin-top: 20px;
}
button {
    display: block;
    width: 100%;
    padding: 10px;
    background: #CCD451;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 20px;
    transition: background 0.3s ease;
}
button:hover {
    background: #3EAB79;
}
.loading-icon {
    display: none;
    width: 50px;
    height: 50px;
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-top-color: #CCD451;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    position: relative;
    bottom: 0px;
    left: 0%;
    transform: translateX(-10%); 
}

@keyframes spin {
    0% { transform: translateX(-10%) rotate(0deg); }
    100% { transform: translateX(-10%) rotate(360deg); }
}
.custom-label {
    display: inline-block;
    position: relative;
    cursor: pointer;
}

.custom-label[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%; /* 调整位置以使 tooltip 显示在元素上方 */
    left: 50%;
    transform: translateX(-50%); /* 使 tooltip 居中显示 */
    background-color: #333;
    color: #fff;
    border-radius: 5px;
    padding: 4px 8px;
    opacity: 0.7;
    font-size: 14px;
    white-space: nowrap;
    display: block;
}

.custom-label[data-tooltip]:hover::before {
    content: "";
    position: absolute;
    bottom: -6px; /* 调整箭头位置 */
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px 6px 0;
    border-style: solid;
    border-color: #333 transparent transparent;
    display: block;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
    function showLoading() {
        document.getElementById('loading').style.display = 'block';
    }
    function hideLoading() {
        document.getElementById('loading').style.display = 'none';
    }

    function validateForm(event) {
      event.preventDefault();
      showLoading();
      const ingredients = [...document.querySelectorAll('input[name="ingredient"]:checked')]
            .map(ingredient => ingredient.value).join(', ');
      const cuisine = document.querySelector('input[name="cuisine"]:checked').value;
      if (!ingredients || !cuisine) {
          alert('请选择至少一个食材和一个菜系！');
          return false;
      }
      fetch('/getai', {
          method: 'POST', 
          headers: {
              'Content-Type': 'application/json',
          },
          body: JSON.stringify({ ingredients, cuisine }),
      }).then(response => response.json()).then(data => {
         document.getElementById('response-data').innerHTML = JSON.stringify(data, null, 2);
         document.getElementById('response-data').style.fontSize = '16px';
         document.getElementById('response-data').style.textAlign = 'left';
         hideLoading();
      }).catch((error) => console.log('Error:', error));
      return false;
    }
    const form = document.querySelector('form');
    form.addEventListener('submit', validateForm);
});
</script>
</head>
<body>
<h1>五星级创意菜大师</h1>
<main>
<div class="container">
    <div style="text-align: right;">
      <a href="http://www.flavorsomerecipes.com">Back to Home</a>
    </div>
    <form onsubmit="return validateForm()">
    <h2>食材选择</h2>
    <div class="ingredient-list">
        {% for ingredient in ingredients %}
            <label><input type="checkbox" name="ingredient" value="{{ ingredient }}"> {{ ingredient }}</label>
        {% endfor %}
    </div>
    <h2>菜系选择</h2>
    <div class="cuisine-list">
        {% for cuisine,introduce in cuisines %}
            <label class="custom-label" data-tooltip="{{ introduce }}"><input type="radio" name="cuisine" value="{{ cuisine }}">{{ cuisine }}</label>
        {% endfor %}
        <div id="loading" class="loading-icon"></div>
    </div>
    <button type="submit">提交</button>
    </form>
    <h2>↓ 五星级创意食谱 ↓<h2>
    <div id="response-data"></div>
</div>
</main>
    {% include 'footer.html' %}
</body>
</html>
